<div class="modal-header">
    <div class="modal-title">
        <i nz-icon type="team"></i>
        {{"SelectUsers" | localize}}
    </div>
</div>
<fieldset>
    <nz-input-group nzSearch [nzAddOnAfter]="suffixSearchButton">
        <input type="text" nz-input [(ngModel)]="filterText" (keyup.enter)="refresh()" name="filterText" placeholder="{{'SearchWithThreeDot' | localize}}">
        <ng-template #suffixSearchButton>
            <button nz-button nzType="primary" nzSearch (click)="refresh()">
                <i nz-icon type="search"></i>
            </button>
        </ng-template>
    </nz-input-group>
    <div class="my-md">
        <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
            <ng-template #message>
                <span>
                    已选择<strong class="text-primary">{{selectedDataItems.length}}</strong> 项
                </span>
                <a (click)="restCheckStatus(dataList)" class="ml-md">
                    {{'Clear' | localize}}
                </a>
            </ng-template>
        </nz-alert>
    </div>
    <nz-row nzGutter="8">
        <nz-col nzSm="24">
            <nz-table #nzDataTable [nzFrontPagination]="false" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true"
                [nzData]="dataList" [nzTotal]="totalItems" [nzLoading]="isTableLoading" [(nzPageIndex)]="pageNumber"
                [(nzPageSize)]="pageSize" (nzPageIndexChange)="refresh()" (nzPageSizeChange)="refresh()" [nzNoResult]="noDataTemplate"
                [nzShowTotal]="totalTemplate">
                <ng-template #noDataTemplate>
                    <no-data></no-data>
                </ng-template>
                <ng-template #totalTemplate let-total>
                    {{'TotalRecordsCount' | localize:total}}
                </ng-template>
                <thead>
                    <tr>
                        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzDisabled]="allCheckboxDisabled"
                            [nzIndeterminate]="checkboxIndeterminate" (nzCheckedChange)="checkAll($event)"></th>
                        <th>
                            {{'Name' | localize}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of nzDataTable.data">
                        <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshCheckStatus(dataList)"></td>
                        <td>
                            {{item.name}}
                        </td>
                    </tr>
                </tbody>
            </nz-table>

        </nz-col>
    </nz-row>
</fieldset>
<div class="modal-footer">
    <button nz-button [nzType]="'default'" type="button" (click)="close($event)" [disabled]="saving">
        {{"Cancel" | localize}}
    </button>
    <button nz-button [nzType]="'primary'" [disabled]="saving" [nzLoading]="saving" (click)="addUsersToOrganizationUnit()">
        <i nz-icon type="save" *ngIf="!saving"></i> {{"Save" | localize}}
    </button>
</div>
